<template>
    <table border="1">
        <tr>
            <td>房型名称</td>
            <td>
                <input type="text" v-model="info.htname">
            </td>
        </tr>
        <tr>
            <td>房型价格</td>
            <td>
                <input type="text" v-model="info.htprice">
            </td>
        </tr>
        <tr>
            <td>房型面积</td>
            <td>
                <input type="text" v-model="info.htsize">
            </td>
        </tr>
        <tr>
            <td>可住人数</td>
            <td>
                <input type="text" v-model="info.htpeonum">
            </td>
        </tr>
        <tr>
            <td>房型图片</td>
            <td>
                <img :src="info.htpicture" style="width: 110px;height: 100px;">
                <input type="file" @change="upload">
            </td>
        </tr>
        <tr>
            <td>房型描述</td>
            <td>
                <input type="text" v-model="info.htprescribe">
            </td>
        </tr>
        <tr>
            <td>是否有窗</td>
            <td>
                <input type="radio" v-model="info.windows" :value="true" name="A">有窗户
                <input type="radio" v-model="info.windows" :value="false" name="A">没窗户
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="button" value="确定" @click="addt">
            </td>
        </tr>
    </table>
    </template>
    <script setup lang="ts">
    import {ref} from 'vue'
    import axios from 'axios';
    import { useRoute } from 'vue-router';
    import { onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    onMounted(()=>{
        fantian();
    })
    const rou=useRoute();
    const fantian=()=>{
        axios.get('http://localhost:41810/api/House/Fill',{
            params:{
                id:rou.params.id
            }
        })
        .then(res=>{
            info.value=res.data
        })
        .catch(error=>{
            console.log(error);
        })
    }
    const upload=(x:any)=>{
        var file=x.target.files[0];
        var fd=new FormData();
        fd.append("files",file);
        axios.post('http://localhost:41810/api/UpFile/Upload',fd)
        .then(res=>{
            if(res.data.imgcode==1){
                alert(res.data.imessage);
                info.value.htpicture=res.data.imsg
            }
            else if(res.data.imgcode==-1){
                alert(res.data.imessage);
            }
            else if(res.data.imgcode==-2){
                alert(res.data.imessage);
            }
        })
        .catch(error=>{
            console.log(error);
        })
    }
    const info=ref({
        "htid":rou.params.id,
        "htname": "",
        "htprice": "",
        "htsize": "",
        "htpeonum": "",
        "htpicture": "",
        "htprescribe": "",
        "windows": true,
        "htisdel": 0
    })
    const ror=useRouter();
    const addt=()=>{
        if(info.value.htname==""){
            alert('房型名称不能为空');
            return;
        }
        if(info.value.htprice==""){
            alert('房型价格不能为空');
            return;
        }
        if(info.value.htsize==""){
            alert('房型面积不能为空');
            return;
        }
        if(info.value.htpeonum==""){
            alert('可住人数不能为空');
            return;
        }
        if(info.value.htpicture==""){
            alert('房型图片不能为空');
            return;
        }
        if(info.value.htprescribe==""){
            alert('房型描述不能为空');
            return;
        }
        axios.post('http://localhost:41810/api/House/UpdType',info.value)
        .then(res=>{
            if(res.data>0){
                alert('修改成功');
                ror.push('/ShowType');
            }
            else{
                alert('修改失败');
            }
        })
        .catch(error=>{
            console.log(error);
        })
    }
    </script>